<template>
    <div class="order_box" >
        <div class="order_list">
            <ul @scroll="scroll" ref="scroll">
                <li v-for="todo in data" :key="todo.Id">
                    <div class="order_listTop">
                        <span class="order_listTopId"><em>[期号]</em>{{todo.GameCode}}</span>
                        <span class="order_listTopPrice">{{ -todo.Coin }}</span>
                    </div>
                    <div class="order_listInfo">
                        <span class="order_listInfoTime">{{ todo.WagerTime.split("T")[0] + " " + todo.WagerTime.split("T")[1] }}</span>
                        <span class="order_listInfoResult">得<em>{{todo.WinCoin}}</em>豆</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="order_mask" @touchend="hide"></div>
    </div>
</template>

<script>
import axios from "axios"

export default {
    props:{
        data: Array,
        obj: Object,
        status: Boolean
    },
    data(){
        return {
            ajaxStatus: true
        }
    },
    methods:{
        hide(){
            this.obj.status = false;
        },
        scroll(){
            if(this.$refs.scroll.clientHeight - this.$refs.scroll.scrollTop <= 100 && this.ajaxStatus){
                this.obj.page += 1;
                this.ajaxStatus = false;
                axios({
                    method:'get',
                    url: this.$store.state.href + '/api/query/Order?index=' + this.obj.page,
                    data:{
                        param:''
                    },
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    }
                }).then((res)=>{
                    if(res.data.length != 0){
                        this.ajaxStatus = true;
                        this.data.push(...res.data);
                    }else{
                        this.ajaxStatus = false;
                    }
                })
            }
        }
    },
    watch:{
        status(){
            this.ajaxStatus = true;
            this.$refs.scroll.scrollTop = 0;
        }
    }
}
</script>

<style>
.order_box{position:fixed; width: 100%; height: 100%; z-index: 1000;}
.order_mask{position: absolute; left: 0;top: 0; background: rgba(0,0,0,0.6); width: 100%; height: 100%; z-index: 1;}
.order_list{background: url(../public/images/order_back.jpg); position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; border-top: 0.02rem solid #f64440; z-index: 2;}
.order_list ul{overflow: auto; height: 100%;-webkit-overflow-scrolling:touch;}
.order_list li{ background: #333; padding:0.12rem 0.11rem 0.14rem; margin-bottom: 0.05rem;}
.order_listTop{overflow: hidden; line-height: 0.2rem;}
.order_listTopId{float: left; color: #fff;}
.order_listTopId em{padding-right: 0.03rem;}
.order_listTopPrice{float: right; color: #f14558;}

.order_listInfo{overflow: hidden; color:#fff; line-height: 0.2rem;}
.order_listInfoTime{float: left; }
.order_listInfoResult{float: right;}
.order_listInfoResult em{padding:0 0.03rem;}
</style>
